<template>
  <div class="container clearfix">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh">
      <!-- 百科 -->
      <div class="baike"
           v-if="content">
        <div class="bkbox">
          <div class="card_bg">
            <div class="card">
              <h1 class="title">{{cate_name}}</h1>
              <div class="desc">{{desc}}</div>
              <div class="btnBox">
                <p class="view_bk"
                   @click="to_baike">
                  <span class="text">查看百科</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <!-- nav筛选 -->
        <div class="sticky">
          <ul class="nav">
            <li class="nav_item"
                :class="active1?'red':''"
                @click="hotClick">销量</li>
            <li class="nav_item"
                :class="active2?'red':''"
                @click="scoreClick">人气</li>
            <li class="nav_item"
                :class="active3?'red':''"
                @click="priceClick">
              价格
              <span v-if="!active3">
                <img v-if="ImgBaseUrl"
                     :src="ImgBaseUrl+'shang-hui@2x.png'"
                     class="nav_up">
                <img v-if="ImgBaseUrl"
                     :src="ImgBaseUrl+'xia-hui@2x.png'"
                     class="nav_down">
              </span>
              <span v-if="active3&&!up">
                <img v-if="ImgBaseUrl"
                     :src="ImgBaseUrl+'shang-hui@2x.png'"
                     class="nav_up">
                <img v-if="ImgBaseUrl"
                     :src="ImgBaseUrl+'xia-hong@2x.png'"
                     class="nav_down">
              </span>
              <span v-if="active3&&up">
                <img v-if="ImgBaseUrl"
                     :src="ImgBaseUrl+'shang-hong@2x.png'"
                     class="nav_up">
                <img v-if="ImgBaseUrl"
                     :src="ImgBaseUrl+'xia-hui@2x.png'"
                     class="nav_down">
              </span>
            </li>
          </ul>
        </div>
        <!-- 项目列表 -->
        <mallList :mallList="projectData"
                  v-if="projectData.length >0"></mallList>
        <p class="daodi"
           v-if="daodi">因为甄选，所以珍稀</p>
        <!-- 没有找到想要的内容 -->
        <div class="empty"
             :class="[isIphoneX ? 'iphonex_empty' : '']"
             v-if="empty">
          <img src="https://h5.ameimeika.com/mp_images/mp_2.7/empty2@2x.png"
               alt
               class="nothing">
          <div class="text">没有找到宝宝想看的内容</div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
import mallList from "@/components/mall_List/mall_List_java";
export default {
  data () {
    return {
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      active1: false, //销量点击 ->true变红
      active2: false, //人气
      active3: false, //价格
      up: false, //价格排序 true-> 低到高 false->高到低
      isIphoneX: false,
      projectData: [], //项目列表
      desc: "", //简介
      content: false,
      daodi: false, //下拉到底
      isbottom: false,
      empty: false, //没有找到内容
      page: 1, //页码
      pageSize: 10, //分页数量
      sales_sort: "", //销量排序 1高到低 0 低到高
      collect_sort: "", //人气排序 1高到底 0低到高
      price_sort: "", //价格排序 1 高到低 2低到高 0 默认
      cate_name: "", //三级分类名字
      cate_id: "", //分类id
      province_id: "", //省id
      lat: "", //	纬度
      lng: "" //经度
    };
  },
  components: {
    mallList
  },
  watch: {},
  onLoad (options) {
    let that = this;
    wx.setNavigationBarTitle({
      title: options.cate_name
    });
    Object.assign(this.$data, this.$options.data());
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        if (res.model.search("iPhone X") != -1) {
          that.isIphoneX = true;
        }
      }
    });
    this.cate_name = options.cate_name;
    this.cate_id = options.cate_id; //分类id
    //获取省份id和经纬度
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        that.province_id = info.province_id;
        that.lng = info.lgd; // 经度
        that.lat = info.ltd; // 纬度
        that.getProjectData();
      },
      fail: () => {
        that.getLocation();
      }
    });
  },
  methods: {
    //获取定位
    getLocation () {
      let that = this;
      wx.getLocation({
        type: "gcj02",
        success (res) {
          that.lng = res.longitude; // 经度
          that.lat = res.latitude; // 纬度
          that.getProjectData();
        },
        fail () {
          wx.showToast({
            title: "无法获取地理位置",
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      });
    },
    //查看百科
    to_baike () {
      if (this.content) {
        wx.navigateTo({
          url: `/pages/package_projects/baike/main?cate_name=${this.cate_name}`
        });
      }
    },
    //点击销量
    hotClick () {
      this.isbottom = false;
      this.active1 = true;
      this.active2 = false;
      this.active3 = false;
      this.up = false;
      this.sales_sort = 1;
      this.collect_sort = 0;
      this.price_sort = 0;
      this.page = 1;
      this.getProjectData();
    },
    //点击人气
    scoreClick () {
      this.isbottom = false;
      this.active2 = true;
      this.active1 = false;
      this.active3 = false;
      this.up = false;
      this.collect_sort = 1;
      this.sales_sort = 0;
      this.price_sort = 0;
      this.page = 1;
      this.getProjectData();
    },
    //点击价格
    priceClick () {
      this.isbottom = false;
      this.active3 = true;
      this.active1 = false;
      this.active2 = false;
      this.up = !this.up;
      if (this.up) {
        this.price_sort = 1;
      } else {
        this.price_sort = 2;
      }
      this.sales_sort = 0;
      this.collect_sort = 0;
      this.page = 1;
      this.getProjectData();
    },
    //项目列表
    getProjectData () {
      if (this.isbottom || this.empty) {
        return false;
      }
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/com.mmk.reservation.api.OpenBeautyCategoriesProvider/1.0.0/threeSearch.html",
        {
          cateId: this.cate_id - 0, //二级分类id
          provinceId: this.province_id, //省份id
          lat: (this.lat || 0) + '', //纬度
          lng: (this.lng || 0) + '', //经度
          pageNum: this.page, //页码
          pageSize: this.pageSize, //分页数量
          salesSort: this.sales_sort + '', //销量排序
          collectSort: this.collect_sort + '', //人气排序
          priceSort: this.price_sort + '' //价格排序
        },
        response => {
          let res = response.data;
          wx.hideLoading();
          if (res.code == 0) {
            let arr = res.data.project; //项目
            let total = res.data.count; //项目总行数
            if (total <= 0) {
              this.empty = true;
              this.isbottom = true;
              this.daodi = false;
            }
            if (arr.length > 0 && this.page == 1) {
              this.projectData = [...arr];
              this.daodi = true;
            } else if (arr.length > 0 && this.page > 1) {
              this.projectData.push(...arr);
              this.daodi = true;
            } else if (arr.length == 0 && this.page > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.isbottom = true;
              this.daodi = true;
            }
            if (res.data.mall) {
              this.desc =
                res.data.mall.descript ? res.data.mall.descript : ""; //百科
              wx.setStorageSync("content", res.data.mall.content); //富文本
              this.content = res.data.mall.content ? true : false;
            }
          } else {
            common.mmk_Loading(2, res.message);
          }
        }, 'isJava'
      );


    },
    //上拉加载
    pullrefresh (e) {
      this.page++;
      this.getProjectData(this.num);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  .baike {
    width: 100%;
    background-color: rgba(243, 244, 246, 1);
    border: 1px solid #fff;
    .bkbox {
      margin-bottom: 2%;
      .card_bg {
        background: url("https://h5.ameimeika.com/mp_images/mp_2.7/bgdown.png")
          no-repeat;
        background-size: cover;
        padding: 25px 15px;
        box-sizing: border-box;
        .card {
          margin: 0 auto;
          width: 100%;
          height: 204px;
          background: url("https://h5.ameimeika.com/mp_images/mp_2.7/bgup.png")
            no-repeat;
          background-size: cover;
          box-shadow: 0px 3px 12px 0px rgba(255, 214, 221, 0.71);
          border-radius: 8px;
          font-family: PingFangSC-Regular;
          padding: 20px 24px 13px;
          box-sizing: border-box;
          position: relative;
          .title {
            font-size: 17px;
            font-weight: 500;
            color: #f64665;
            line-height: 24px;
          }
          .desc {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
            margin: 20px 0 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
          .btnBox {
            position: absolute;
            bottom: 10%;
            width: 86%;
            .view_bk {
              margin: 0 auto;
              width: 95px;
              height: 32px;
              background: rgba(246, 70, 101, 0.1008);
              border-radius: 4px;
              text-align: center;
              .text {
                font-size: 14px;
                color: #ff94a7;
                font-weight: 400;
                line-height: 32px;
              }
            }
          }
        }
      }
    }
  }
  .content {
    background: #ffffff;
    .sticky {
      background-color: #fff;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 999;
      .nav {
        width: 100%;
        height: 40px;
        .nav_item {
          width: 31.3%;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          color: #666;
          float: left;
          position: relative;
          &.red {
            color: #ff383e;
          }
          .nav_up,
          .nav_down {
            width: 7px;
            height: 4px;
            position: absolute;
            left: 70%;
          }
          .nav_up {
            top: 35%;
          }
          .nav_down {
            bottom: 37%;
          }
        }
        .scroll-view {
          .bg {
            width: 100%;
            text-align: center;
            .bg_img {
              width: 105px;
              height: 105px;
              margin-top: 70px;
            }
          }
        }
      }
    }
    .daodi {
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #999990;
      line-height: 20px;
      padding: 15px 0 20px;
      background-color: rgba(243, 244, 246, 1);
    }
    // 没有找到想要的内容
    .empty {
      width: 154px;
      margin: 0 auto;
      padding: 25% 0 14%;
      &.iphonex_empty {
        padding: 36% 0 37%;
      }
      .nothing {
        width: 128px;
        height: 114px;
        margin: 0 auto;
        display: block;
      }
      .text {
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        margin-top: 13px;
        color: rgba(153, 153, 153, 1);
        text-align: center;
      }
    }
  }
}
</style>



